<template>
  <!-- 修改组件标签名 -->
  <AppMaster :name="name">
    <div class="rightBody">
        <div class="rightBody1">
          <div class="rightBody11 center" v-if="sendStatus==0">早上好</div>

          <div class="rBody11" ref="scroll" v-if="sendStatus==1">
            <div :class="index%2==0?'usercss':'botcss'" v-for="(item,index) in list1" :key="index">
              <div class="a1a"></div>
              <!-- <div :class="index%2==0?'a2a':'a3a'"> -->
              
                <div :class="index%2==0?'a2a':'a3a'" v-html="renderMarkdown(item.content)"></div>

              
              <!-- {{ item.content }}</div> -->
            </div>
          </div>




          <div class="rightBody12">
            <div style="height: 10px;"></div>
            <div class="rightBody121">
              <textarea v-model="textarea2" @keyup.enter="sendMsg" placeholder="请输入内容" class="textarea2"></textarea>
              </div>
            <div class="rightBody122">
              <div class="rightBody1220"></div>
              <div class="rightBody1222 center">
                <img class="rightBody1221 center" @click="sendMsg" src="../assets/toup.png" mode="widthfix" alt="">
                </div>
            </div>
          </div>
          <div class="height20px"></div>
          <div class="rightBody123" v-if="sendStatus==0"></div>
        </div>
      </div>
    
  </AppMaster>
</template>

<script>
// 修改导入路径
import AppMaster from '@/components/AppMaster.vue';
export default {
  name: 'AiChatView',
  components: {
    // 修改组件注册名
    AppMaster
  },
  data() {
    return {
      name: '',
      conventionId: '',
      textarea2: '',
      sendStatus: 0,
      selectNum: 0,
      list1: [
      ],
    };
  },
  methods: {
    
    renderMarkdown(text) {
      // 检查实例是否存在，避免出现 undefined 错误
      if (this.$md) {
        console.log("text");
        return this.$md.render(text);
      }
      return text; // 如果实例不存在，直接返回原始文本
    },
    async sendMsg(){
      let userContent = this.textarea2.trim()
      this.textarea2 = ''
      if(userContent){
        this.sendStatus = 1
        this.list1.push({
          role: 'user',
          content: userContent
        })
        // 滚动条移动倒底部
        this.$nextTick(() => {
          this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
        })

        const response = await this.$axios.post('http://www.inf-share.com:9000/api/chat', {
          headers: {
            'Content-Type': 'application/json'
          },
          content: userContent,
          conventionId: this.conventionId,
          user: sessionStorage.getItem('user'),
        });

      console.log('response',response.data);
      if(!response.data.errorMsg){
        console.log('response.data.content',response.data.content[response.data.content.length-1].content);
        this.conventionId = response.data.conventionId
        this.list1.push({
          role: 'bot',
          content: response.data.content[response.data.content.length-1].content
        })
        // 滚动条移动倒底部
        this.$nextTick(() => {
          this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
        })
        
      }else{
        this.$message({
          message: response.data.errorMsg,
          type: 'error'
        });
      }

      }else{
        this.$message({
          message: '请输入内容',
          type: 'warning'
        })
      }
    },
    outfocus(){
      console.log('outfocus');
    },
    getfocus(){
      console.log('getfocus');
    },
    selectTap(index){
      this.selectNum = index;
    },
    logout() {
      this.$router.push("/AiLoginView");
    },
  },
  mounted() {
    this.name = JSON.parse(sessionStorage.getItem('user')).name;
  }
};
</script>

<style scoped>

.AiChatView{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    background-color: #f1f1f1;
}
.left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 200px;
  background-color: rgb(241, 241, 241);
}
.leftHeader{
  height: 80px;
  width: 100%;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 1px rgb(221, 221, 221) solid;
  margin-bottom: 10px;
}
.leftBody{
  width: 100%;
  flex: 1;
  background-color: rgb(241, 241, 241);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leftBodyList{
  display: flex;
  height: 50px;
  width: 80%;
  border-radius: 10px;
}
.leftHeaderL{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leftHeaderLimg{
  width: 30px;
  height: 30px;
}
.leftHeaderLimg1{
  width: 20px;
  height: 20px;
}
.leftHeaderR{
  margin-right: 26px;
  margin-left: 5px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.right{
  overflow: hidden;
  height: 100%;
  flex: 1;
  background-color: #ebbdbd;
  display: flex;
  flex-direction: column;
}
.rightHeader{
  height: 80px;
  background-color: #fff;
  width: 100%;
  display: flex;
  /* border-left: 1px rgb(241, 241, 241) solid; */
}
.rightHeader1{
  width: 1px;
  height: 80px;
  background-color: rgb(241, 241, 241);
}
.rightHeader2{
  display: flex;
  align-items: center;
  flex: 1;
}
.rightHeader21{
  flex: 1;
}
.rightHeader22{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rosybrown;
  margin-right: 20px;
}
.rightHeader23{
  height: 100%;
  margin-right: 20px;
}
.rightHeader24{
  height: 100%;
  margin-right: 20px;
}
.rightHeader241{
  width: 20px;
  margin-right: 20px;
}
.leftBodyList2{
  font-size: 12px;
  margin-left: 10px;
  margin-right: 26px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.rightBody{
  width: 100%;
  /* flex: 1; */
  height: calc(100vh - 80px);
  background-color: #fff;
  display: flex;
  justify-content: center;
}
.rightBody1{
  width: 550px;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightBody1a{
  width: 550px;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rightBody11{
  width: 100%;
  font-size: 24px;
  font-weight: 700;
}
.rightBody12{
  margin-top: 15px;
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-radius: 15px;
  border: solid 1px #cfcfcf;
  display: flex;
  flex-direction: column;
}
.rightBody121{
  flex: 1;
  width: 100%;
  /* background-color: aqua; */
}
.rightBody122{
  height: 50px;
  width: 100%;
  /* background-color: rgb(196, 196, 196); */
  display: flex;
}
.rightBody1222{
  margin-right: 8px;
  width: 27px;
  height: 100%;
}
.rightBody1221{
  width: 27px;
  /* height: 100%; */
  align-items: center;
}
.rightBody1220{
  flex: 1;
}
.textarea2{
  padding: 0 10px 10px 10px;
  width: 96%;
  border: none;
  outline: none;
}
.rightBody123{
  height: 140px;
}
.rBody11{
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.marginbottom{
  margin-bottom: 20px;
}
.usercss{
  margin-bottom: 20px;
  display: flex;
}
.botcss{
  margin-bottom: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.a1a{
  flex: 1;
}
.a2a{
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 400;
  max-width: 50%;
  display: flex;
  flex-direction: column;

}
.a3a{
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 400;
}
</style>
